<template>
  <a-card :bordered="false">

    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="12">
          <a-col :md="7" :sm="8">
            <a-form-item label="分类名称" :label-col="{span: 6}" :wrapper-col="{span: 14, offset: 1}">
              <a-input v-model="queryParam.dictCode" placeholder="请输入分类名称"/>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
              <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>


    <a-table
      ref="table"
      row-key="id"
      size="middle"
      :columns="columns"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      class="j-table-force-nowrap"
    >
      <template slot="htmlSlot" slot-scope="text">
        <div v-html="text"/>
      </template>
      <p slot="expandedRowRender" slot-scope="record" style="margin: 0">
        <a-row>
          <a-col :md="24" :sm="24">
            <a-form-item label="网站链接：" :label-col="{span: 3}" :wrapper-col="{span: 21}">
              {{ record.link }}
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="网站LOGO链接：" :label-col="{span: 3}" :wrapper-col="{span: 21}">
              {{ record.webLogo }}
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="网站描述：" :label-col="{span: 3}" :wrapper-col="{span: 21}">
              {{ record.webDescribe }}
            </a-form-item>
          </a-col>
        </a-row>
      </p>
      <span slot="action" slot-scope="text, record">
        <template v-if="record.state === '0'">
          <a @click="handleShenHeModalShow(record)">
            <a-icon type="edit"/>
            审核通过
          </a>
          <a-divider type="vertical"/>
            <a @click="handleShenHeModalShow(record)">
            <a-icon type="eye"/>
            审核不通过
          </a>
          <a-divider type="vertical"/>
        </template>

        <a-popconfirm title="确定删除吗?" @confirm="() =>handleDelete(record.id)">
          <a>
            <a-icon type="delete"/>
            删除
          </a>
        </a-popconfirm>
      </span>
    </a-table>

    <a-modal
      title="友联审核"
      :width="600"
      :visible="visible"
      :confirm-loading="confirmLoading"
      cancel-text="关闭"
      @ok="handleShenHe('1')"
      @cancel="handleCancel"
    >
      <template slot="footer">
        <a-button key="back" @click="handleShenHe('1')">
          审核通过
        </a-button>
        <a-button key="submit" type="primary" @click="handleShenHe('2')">
          审核不通过
        </a-button>
      </template>
      <a-textarea
        v-model="friendLinksdata.feedback"
        placeholder="请输入审核反馈"
        :auto-size="{ minRows: 2, maxRows: 5 }"
      />
    </a-modal>
  </a-card>
</template>

<script>
import { TableListMixin } from '@/mixins/TableListMixin'
import { filterObj } from '@/utils/util'
import { putAction } from '@/api/manage'

export default {
  name: 'FriendLinks',
  mixins: [TableListMixin],
  data() {
    return {
      description: '分类管理',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 20,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '网站名称',
          align: 'center',
          dataIndex: 'name'
        },
        {
          title: '邮箱',
          align: 'center',
          dataIndex: 'email'
        },
        {
          title: '审核状态',
          align: 'center',
          dataIndex: 'state',
          customRender: function(t, r, index) {
            return r.state === '0' ? '未审核' : (r.state === '1' ? '审核通过' : '审核不通过')
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: '10%',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/friendLinks/list',
        delete: '/friendLinks/delete',
        edit: '/friendLinks/edit'
      },
      friendLinksdata: {},
      visible: false,
      confirmLoading: false
    }
  },
  methods: {
    getQueryParams() {
      // 获取查询条件
      const param = Object.assign(this.queryParam, this.filters, this.sorter)
      param.field = this.getQueryField()
      param.pageNo = this.pagination.current
      param.pageSize = this.pagination.pageSize
      return filterObj(param)
    },
    handleCancel() {
      this.visible = false
    },
    handleShenHeModalShow(record) {
      this.friendLinksdata = record
      this.visible = true
    },
    handleShenHe(state) {
      var text = this.friendLinksdata.feedback
      if (text === undefined || text === null || text.length === 0 || text.trim().length === 0) {
        this.$message.error('你也得留下一点内容才行撒！')
      } else {
        this.friendLinksdata.state = state
        this.confirmLoading = true
        putAction(this.url.edit, this.friendLinksdata).then(res => {
          if (res.success) {
            this.loadData()
            this.confirmLoading = false
            this.handleCancel()
            this.$message.success(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
          this.handleCancel()
        })
      }

    }
  }
}
</script>
